<template>
  <div class="home">
    <div>这是首页</div>

    <button @click="increase()">+1</button>

    <h1>{{ this.num }}</h1>
    <!-- <div class="bigbox">
      <div
        class="smallbox"
        :style="{ height: scroll + 'px', width: scroll + 'px' }"
      ></div>
    </div> -->
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item, index) in lbtimg" :key="index">
        <a :href="item.detail">
          <img width="100%" :src="item.imgurl" alt="" />
        </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapState } from "vuex";
import { getHomeCasual } from "../api/index";
import axios from "axios";
export default {
  data() {
    return {
      num: 0,
      lbtimg: [],
      scrHeight: 400,
      scroll: "",
    };
  },
  computed: {
    scrHeight: function () {
      console.log(window.innerHeight);
      console.log("1111");
      return window.innerHeight - 46 - 50 + "px";
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);

    getHomeCasual().then((res) => console.log(res));

    axios.get("http://127.0.0.1:3000/api/homecasual").then((res) => {
      // console.log(res.data.message);
      this.lbtimg = res.data.message;
    });
  },
  methods: {
    ...mapMutations({
      setNum: "SET_NUM",
    }),

    increase() {
      this.num++;
      this.setNum(this.num);
    },
    handleScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.scroll += 400;
      console.log(this.scroll);
    },
  },
  computed: {
    ...mapState({
      number: (state) => state.home.number,
    }),
  },
};
</script>
<style>
.bigbox {
  height: 400px;
  background-color: blue;
  overflow: hidden;
  position: relative;
}
.smallbox {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 100%;
  /* height: 400px; */
  border-radius: 50%;
  background: red;
}
.mint-swipe {
  height: 200px;
}
</style>
